<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="kityformula/assets/styles/base.css">
    <link rel="stylesheet" href="kityformula/assets/styles/ui.css">
    <link rel="stylesheet" href="kityformula/assets/styles/scrollbar.css">
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
      
      .kf-editor {
        width: 780px;
        height: 380px;
      }
      
      #loading {
        height: 32px;
        width: 340px;
        line-height: 32px;
        position: absolute;
        top: 42%;
        left: 50%;
        margin-left: -170px;
        font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      #loading img {
        position: absolute;
      }
      
      #loading p {
        display: block;
        position: absolute;
        left: 40px;
        top: 0px;
        margin: 0;
      }
    </style>
    <title></title>
  </head>

  <body>
    <div id="kfEditorContainer" class="kf-editor">
      <div id="tips" class="tips">
        sorry! Beta版本仅支持IE9及以上版本的浏览器，正式版本将会支持低版本浏览器，谢谢您的关注！
      </div>
    </div>
    <!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
    <!--internal.js默认是放到dialogs目录下的-->
    <script type="text/javascript" src="../core.js"></script>

    <script src="kityformula/js/jquery-1.11.0.min.js"></script>
    <script src="kityformula/js/kitygraph.all.js"></script>
    <script src="kityformula/js/kity-formula-render.all.js"></script>
    <script src="kityformula/js/kity-formula-parser.all.min.js"></script>
    <script src="kityformula/js/kityformula-editor.all.min.js"></script>
    <script>
      (function(UE) {
        var oNode = null,
          thePlugins = 'kityformula';
        if (UE.plugins[thePlugins] && UE.plugins[thePlugins].sdectrl) {
          oNode = UE.plugins[thePlugins].sdectrl;
        }
        if (document.body.addEventListener) {
          $("#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载，请耐心等待...</p></div>');
          debugger
          var factory = kf.EditorFactory.create($("#kfEditorContainer")[0], {
            render: {
              fontsize: 24
            },
            resource: {
              path: "./kityformula/resource/"
            }
          });

          factory.ready(function(KFEditor) {
            $("#tips").remove();
            // this指向KFEditor
            var rng = editor.selection.getRange(),
              img = rng.getClosedNode(),
              imgLatex = img && $(img).attr('data-latex');
            if (!imgLatex && oNode) {
              imgLatex = oNode.getAttribute('data-latex') || imgLatex
            }
            this.execCommand("render", imgLatex || "\\placeholder");
            this.execCommand("focus");
            window.kfe = this;

          });

          dialog.onok = function() {
            kfe.execCommand('get.image.data', function(data) {
              var latex = kfe.execCommand('get.source');

              if (oNode) {
                oNode.setAttribute('src', data.img);
                oNode.setAttribute('data-latex', latex);
                delete UE.plugins[thePlugins].sdectrl;
              } else {
                var imgHtml = '<img class="kfformula sde-kityformula" src="' + data.img + '" data-latex="' + latex + '" />';
                editor.execCommand('inserthtml', imgHtml);
              }
              dialog.close();
            });

            return false;
          }

        } else {
          $("#tips").css("color", "black");
          $("#tips").css("padding", "10px");
        }

      })(UE);
    </script>
  </body>

</html>